import React, { Fragment } from 'react'
import { useRecoilValue } from 'recoil'
import { designerState } from '../../../store'
import { Card, Button, message } from 'antd'
import { EditOutlined, RedoOutlined, SettingOutlined } from '@ant-design/icons';

interface IProps {
  children?: any;
}

export default function MetaWrapper (props: IProps) {
  const selectedNode = useRecoilValue(designerState.selectedNodeAtom);

  return (
    <Fragment>
      <Card
        type="inner"
        title="轮播图"
        actions={[
          <Button type="text" onClick={() => message.info('访问主页') } key="1">
            <EditOutlined />
          </Button>,
          <Button type="text" onClick={() => message.info('编辑内容') } key="2">
            <SettingOutlined  />
          </Button>,
          <Button type="text" onClick={() => message.info('复制到其他工程') } key="3">
            <RedoOutlined />
          </Button>,
        ]}
      >
        <p>ID:  { selectedNode.meta.id }</p>
        <p>类型：{ selectedNode.meta.type }</p>
        <p>标识：{ selectedNode.meta.name }</p>
        <p>名称：{ selectedNode.meta.title }</p>
        <p>版本：1.0.0</p>
        <p>作者：张三</p>
      </Card>
    </Fragment>
  )
}